import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Post } from './post.interface';

@Component({
  selector: 'app-blogger',
  // 方式1：使用 *ngIf 指令延迟 exe-posts 组件的初始化
  // template: `
  // <h1>Posts by: {{ blogger }}</h1>
  // <div *ngIf="posts">
  //     <app-posts [data]='posts'></app-posts>
  // </div>
  // `

  // 方式2: 利用ngOnChanges，当数据绑定输入属性的值发生变化的时候，Angular 将会主动调用 ngOnChanges() 方法。
//   template: `
//   <h1>Posts by: {{ blogger }}</h1>
//   <div>
//       <app-posts [data]='posts'></app-posts>
//   </div>
//   `
// })

// 方式4：Use Observable
  template: `
  <h1>Posts by: {{ blogger }}</h1>
  <div>
      <app-posts [data]='posts'></app-posts>
  </div>
  `
})
export class BloggerComponent implements OnInit {
  public blogger: string = 'Sunxt';
  // posts: Post[];
  posts: Observable<Post[]>;   // 方式4：Use Observable

  ngOnInit() {
    // this.getPostsByBlogger()
    //   .subscribe(posts => this.posts = posts);
    this.posts = this.getPostsByBlogger();  // 方式4：Use Observable
  }

  getPostsByBlogger(): Observable<Post[]> {
    return Observable.create((observer: Observer<Post[]>) => {
      setTimeout(() => {
        const posts = [
          { 'title': 'Functional Programming', 'category': 'RxJS' },
          { 'title': 'Angular 2 Component Inheritance', 'category': 'NG2' },
          { 'title': 'RxJS Operators', 'category': 'RxJS' },
          { 'title': 'Angular 2 Http Module - HTTP', 'category': 'WEB' },
          { 'title': 'RxJS Observable', 'category': 'RxJS' },
          { 'title': 'Angular 2 AsyncPipe', 'category': 'NG2' }
        ];
        observer.next(posts);
      }, 2000);
    });
  }
}
